<template>
  <div class="header-wrap">
    <a-form layout="inline" :model="searchProp" @finish="handleFinish">
      <a-form-item label="账户名" name="username">
        <a-input
          v-model:value="searchProp.username"
          placeholder="请输入"
          clearable
        />
      </a-form-item>
      <a-form-item label="手机号" name="mobile">
        <a-input
          v-model:value="searchProp.mobile"
          placeholder="请输入"
          clearable
        />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="searchProp.status">
          <a-radio value="1">正常</a-radio>
          <a-radio value="0">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="角色" name="role">
        <a-radio-group v-model:value="searchProp.role">
          <a-radio value="1">普通用户</a-radio>
          <a-radio value="9">管理员</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit"> 搜索 </a-button>
        <a-button type="default" @click="resetForm" style="margin-left: 10px">
          重置
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { reactive } from "vue"
const emit = defineEmits(["confirm"])
const props = defineProps({
  // searchProp: {
  //   type: Object,
  //   default: () => {},
  // },
})
const searchProp = reactive({})

const handleFinish = (values) => {
  console.log(values)
  emit("confirm", values)
}
const resetForm = (e) => {
  for (const key in searchProp) {
    if (Object.hasOwnProperty.call(searchProp, key)) {
      searchProp[key] = ""
    }
  }
  emit("confirm", searchProp)
}
</script>

<style scoped lang="less"></style>
